<!DOCTYPE html>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

       <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	   <script type="text/javascript" src="../js/vue.js"></script>
    <style>
         #bg{
            height:100%;
            width:100%;
            position: absolute;
           /* background-color: #5ACD;*/
            left: 0;
            top: 0;
            background: url(../picture/view2.jpg);
            background-size: 1400px 800px;
            /*opacity: 0.5;*/
        }
        
        #btn{
            position: relative;
            top: 70%;
            height: 20%;
            width: 100%;
            background-color: #F7F5E5;
        }
        #denglu{
            font-size: 50px;
            width: 15%;
            height: 65%;
            border-radius: 10px;
            border: none;
            background-color: #07889B;
            color: #F7F5E5;
            font-size: 35px;
            font-weight: 900;
            left: 25%;
            bottom: 0%;
            position: relative;
        }
        #zhuce{
            position: relative;
            left: 35%;
            top: 8%;
            width: 20%;
            height: 50%;
            border-radius: 40px;
            background-color: rgba(7, 136, 155, 0.8);
            color: blank;
            font-size: 35px;
            font-weight: 600;
            font-family: 楷体;
            border: 2px solid rgba(220, 224, 231, 0.8);
        }
        
        .text{
            color: orange;
            font-size: 40px;
            font-weight: 1000;
            top: 2%;
            font-family: STHupo;
            position: absolute;
        }
        .login_page{
            position: absolute;
            /*backgrou*/nd-color:rgba(247, 245, 229, 0.8);
            height: 75%;
            width: 70%;
            top: 46%;
            left:50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*border: 3px solid #FC8737*/
        }
        .tips{
            position: relative;
            top: 25%;
            left: 24%;
            color: grey;
        }
        .username{
            position: relative;
            height: 25%;
            width: 90%;
            top: 10%;
            left: 5%;
            /* background: #000; */
        }
        .user_name{
            color: #D8BFD8;
            font-size: 33px;
            font-weight: 700;
            top: 29%;
            position: relative;
            left: 7%;
            text-align: left;
            width: 60%;
            height: 30%;
            font-family: 楷体;
            font-style: italic;
        }
        #user_name_input{
            position: relative;
            left: 7%;
            top: 22%;
            width: 65%;
            height: 33%;
            background-color: rgba(247, 245, 229, 0.8);
            text-align: left;
            border: rgba(82, 101, 143, 100);
            font-size: 30px;
            color: grey;
        }
        
        .userpassword{
            position: relative;
            height: 25%;
            width: 90%;
            top: 8%;
            left: 5%;
        }
        .user_password{
            color: #D8BFD8;
            font-size: 33px;
            font-weight: 700;
            top: 25%;
            position: relative;
            left: 10%;
            text-align: left;
            width: 60%;
            height: 30%;
            font-family: 楷体;
            font-style: italic;
        }
        #user_password_input{
            position: relative;
            left: 10%;
            top: 18%;
            width: 65%;
            height: 33%;
            background-color: rgba(247, 245, 229, 0.8);
            text-align: left;
            border:  rgba(82, 101, 143, 100);
            font-size: 30px;
            color: grey;
        }
        .user_confirmpassword{
            color: #D8BFD8;
            font-size: 33px;
            font-weight: 700;
            top: 25%;
            position: relative;
            left: 1%;
            text-align: left;
            width: 160px;
            height: 48px;
            font-family: 楷体;
            font-style: italic;
        }
        #confirm_password_input{
            position: relative;
            left: 0%;
            top: 20%;
            width: 65%;
            height: 60%;
            background-color: rgba(247, 245, 229, 0.8);
            text-align: left;
            border:  rgba(82, 101, 143, 100);
            font-size: 30px;
            color: grey;
        }
        .login_page_btn{
            position: relative;
            top: 10%;
            height: 33%;
            width: 100%;
        }
        .register_page_btn{
            position: relative;
            top: 40%;
            width: 100%;
        }
        #login_page_denglu{
            position: relative;
            left: 22%;
            top: 8%;
            width: 20%;
            height: 50%;
            border-radius: 40px;
            background-color: rgba(7, 136, 155, 0.8);
            color: blank;
            font-family: 楷体;
            font-size: 35px;
            font-weight: 600;
            border: 2px solid rgba(220, 224, 231, 0.8);
        }
        #login_page_cancle{
            position: relative;
            left: 35%;
            top: 8%;
            width: 20%;
            height: 50%;
            border-radius: 20px;
            background-color: rgba(7, 136, 155, 0.8);
            color: blank;
            font-family: 楷体;
            font-size: 35px;
            font-weight: 600;
            border: 2px solid rgba(220, 224, 231, 0.8);
        }
        #success_login_tips{
            position: relative;
            font-size: 30px;
            font-weight: 600;
            color: rgba(7, 136, 155, 0.8);
            top: 0%;
            height: 30%;
            text-align: center;
        }
        .username_tips{
            position: relative;
            top: 25%;
            left: 24%;
            color: red;
        }
        .userpwd_tips{
            position: relative;
            top: 25%;
            left: 24%;
            color: red;
        }
        .register_page{
            position: absolute;
            /*background-color:rgba(247, 245, 229, 0.8);*/
            height: 75%;
            width: 70%;
            top: 46%;
            left:50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
           
        }
        .denglu_success{
            position: relative;
            left: 37%;
            top: 20%;
            width: 20%;
            height: 20%;
            color: rgba(7, 136, 155, 0.8);
            font-size: 36px;
        }
        .zhuce_name{
            position:relative;
            width: 70%;
            top: 10%;
            left: 25%;
            font-size: 15px;
            color: rgba(136, 136, 136, 100);
        }
        .zhuce_name_false_tips{
            position:relative;
            width: 70%;
            top: 10%;
            left: 25%;
            font-size: 15px;
            color: red;
        }
        .zhuce_password{
            position:relative;
            width: 70%;
            left: 25%;
            top:15%;
            font-size: 15px;
            color: rgba(136, 136, 136, 100);
        }
        .zhuce_password_false_tips{
            position:relative;
            width: 70%;
            left: 25%;
            top:15%;
            font-size: 15px;
            color: red;
        }
        .zhuce_confirmpwd{
            position:relative;
            width: 70%;
            left: 25%;
            top:20%;
            font-size: 15px;
            color: rgba(136, 136, 136, 100);
        }
       
        .register_div{
            position: relative;
            top:5%;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="bg">
        <span class="text">iTest</span>
        <div class="login_page" v-show="present">
            <div class="username">
                <span  class="user_name">用户名：</span>
                <input id='user_name_input' type="text" v-model="user" @blur="username_tips_show"><br>
                <div class="tips" @blur="username_tips_show">{{username_tips}}</div>
            </div>
            <div class="userpassword">
                <span class="user_password">密 码：</span>
                <input id='user_password_input' type="password" v-model="pwd" @blur="userpwd_tips_show"><br>
                <div class="tips" >{{userpwd_tips}}</div>
            </div>
            <div class='login_page_btn'>
                <div id="success_login_tips">{{success_login_tips}}</div>
                <button id='login_page_denglu' @click="login_success">登 录</button>
                <button id="zhuce" @click="register">注 册</button>
            </div>
        </div>

        <div class="register_page" v-show="register_present">
            <div class="register_div">
                <div  class="register_name">
                    <span  class="user_name">用户名：</span>
                    <input id='user_name_input' type="text" v-model="username">
                </div>
                <div class="zhuce_name" v-show="zhuce_tishi">
                   <!--  <span >用户名长度为4-12位</span> -->
                </div>
                <div class="zhuce_name_false_tips">
                    {{zhuce_name_tips}}
                </div>
                
            </div>
            <div class="register_div">
                <div class="register_password" @click="judge_username">
                    <span class="user_password">密    码：</span>
                    <input id='user_password_input' type="password" v-model="password">
                </div>
                <div class="zhuce_password" v-show="zhucepwd_tishi">
                    <!-- <span>密码长度为6-12位</span> -->
                </div>
                <div class="zhuce_password_false_tips" >
                    {{zhuce_password_tips}}
                </div>
                
            </div>
            
            <div class="register_div">
                <div class="userconfirmpwd" @click="judge_password">
                    <span class="user_confirmpassword">确 认 密 码：</span>
                    <input id='confirm_password_input' type="password"  v-model="confirmpwd">
                </div>
                <div class="zhuce_confirmpwd" >
                    {{zhuce_confirmpwd_tips}}
                </div>
                
            </div>
              
            <div class="register_div">
                <div class='register_page_btn'>
                    <button id='login_page_denglu' @click="judge_confirmpwd">确 定</button>
                    <button id='login_page_cancle' @click="register_cancle">取 消</button>
                </div>
            </div>
            

        </div>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止 vue 在启动时生成生产提示
    
    const vm=new Vue({
        el:'#bg',
        data:{
            present:true,
            success_login_tips:'',
            username_tips:'',
            userpwd_tips:'',
            user_id:'',
            
            register_present:false,
            zhuce_tishi:true,
            zhuce_long:false,
            zhuce_short:false,
            
            zhucepwd_tishi:true,
            zhucepwd_long:false,
            zhucepwd_short:false,
            
            confirmpwd_success:false,
            confirmpwd_false:false
        },
        methods: {
            login(){
                this.present=true
            },
            username_tips_show(){
                if(this.user.length<=12 && this.user.length>=4){
                    this.username_tips='用户名长度正确'
                }else if(this.user.length<4 || this.user.length>12){
                    this.username_tips='用户名应在4-12位之间'
                }
            },
            userpwd_tips_show(){
                if(this.pwd.length<=12 && this.pwd.length>=6){
                    this.userpwd_tips='密码长度正确'
                }else if(this.pwd.length<6 || this.pwd.length>12){
                    this.userpwd_tips='密码应在6-12位之间'
                }
            },
            login_success(){
                if(this.user.length<=12 && this.user.length>=6 && this.pwd.length<=12 && this.pwd.length>=6){
                    this.postLoginInfo()
                    window.location.href="../code/workspace.html"
                    this.user=''
                    this.pwd=''
                    this.username_tips=''
                    this.userpwd_tips=''
                }
            },
            login_cancle(){
                this.present=false
                this.user=''
                this.pwd=''
            },
            register(){
                this.register_present=true
                this.present=false
            },
            register_cancle(){
                this.register_present=false
                this.present=true
                this.username=''
                this.password=''
                this.confirmpwd=''
            },
            judge_username(){
                if(this.username.length>=4 && this.username.length<=12){
                    this.zhuce_name_tips=''
                    this.zhuce_tishi=true
                    
                }else if(this.username.length>12){
                    this.zhuce_tishi=false
                    this.zhuce_name_tips='长度不应超过12位'
            
                }else if(this.username.length<4){
                    this.zhuce_tishi=false
                    this.zhuce_name_tips='长度不应少于4位'
                    
                }
            },
            judge_password(){
                if(this.password.length>=6 && this.password.length<=12){
                    this.zhuce_password_tips=''
                    this.zhucepwd_tishi=true
                   
                }else if(this.password.length>16){
                    this.zhucepwd_tishi=false
                    this.zhuce_password_tips='长度不应超过12位'
                    
                }else if(this.password.length<6){
                    this.zhucepwd_tishi=false
                    this.zhuce_password_tips='长度不应少于6位'
                    
                }
            },
            judge_confirmpwd(){

                if(this.password == this.confirmpwd  && this.zhucepwd_tishi==true){
                    this.zhuce_confirmpwd_tips='密码设置成功'
                    
                }else {
                    this.zhuce_confirmpwd_tips='密码不一致'
                    
                    
                }
                this.postRegisterInfo()
               
                this.register_present=false
                this.username=''
                this.password=''
                this.confirmpwd=''
                
                this.present=true
                
                
            },
            // 获取登陆成功字符串中的id的值  函数
            getUser_id(obj){
                var id=obj.lastIndexOf("\=");
                obj=obj.slice(id+1);
                console.log(obj);
                return obj;
            },
            postLoginInfo(){
                let url="http://localhost:9091/login"
                axios.post(url,{"username":this.user,"password":this.pwd}).then((info)=>{
                    console.log(info);
                    this.success_login_tips=info.data
                    this.user_id=this.getUser_id(info.data)
                    // 将user_id设置为全局变量的形式，将数据传递给本地
                    localStorage.setItem('userid',this.user_id)
                })
            },
            postRegisterInfo(){
                let url="http://localhost:9091/register"
                axios.post(url,{"username":this.username,"password":this.password,"rpassword":this.confirmpwd}).then((info)=>{
                    console.log(info);
                    this.login_resp=info.data
                })
            }
        }
    })

    
</script>
</html>